<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!-- Bootstrap -->
    <link href="resource/css/vendor/bootstrap.min.css" rel="stylesheet">
    <link href="resource/css/component/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <link href="resource/css/component/select2.min.css" rel="stylesheet" />
    <!-- <link href="resource/css/component/city-select.css" rel="stylesheet" /> -->
    <link href="resource/css/app.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="bg-light-gray">
    
    <div class="header-box container">
      <div class="header row">
        <div class="col-xs-2"><img src="http://qiniu.prod.fita-club.com/logo.png" alt="" class="logo"></div>
        <div class="menu col-xs-10">
          <ul style="display: inline-block; width: 91%;">
            <li class="item">
              <a href="index.html">首页</a>
            </li>
            <li class="item">
              <a href="alamo.html">国际租车</a>
            </li>
            <li class="item">
              <a href="hot-line.html">热门线路</a>
              <div class="submenu text-center">
                <!-- <a href="javascript:void(0);" class="alink">北美租车线路</a>
                <a href="javascript:void(0);" class="alink">斐济岛线路</a>
                <a href="javascript:void(0);" class="alink">邮轮线路</a> -->
              </div>
            </li>
            <li class="item">
              <a href="javascript:void(0);">国际机票</a>
              <div class="submenu text-center">
                <a href="american-airport.html" class="alink">美国航空</a>
                <a href="british-airport.html" class="alink">英国航空</a>
                <a href="feiji-airport.html" class="alink">斐济航空</a>
                <a href="iberia-airport.html" class="alink">西班牙伊比利亚航空</a>
                <a href="hawaiian-airport.html" class="alink">夏威夷航空</a>
              </div>
  
              </li>
            </li>
            <li class="item">
              <a href="javascript:void(0);">奢华邮轮</a>
              <div class="submenu text-center">
                <a href="holland-america-line.html" class="alink">荷美邮轮</a>
                <a href="seabourn-cruise-line.html" class="alink">世邦邮轮</a>
                <a href="disney-cruise-line.html" class="alink">迪士尼邮轮</a>
              </div>
            </li>
            <li class="item">
              <a href="javascript:void(0);">目的地</a>
              <div class="submenu text-center">
                <a href="dfw-destination.html" class="alink">达拉斯沃斯堡国际机场</a>
                <!-- <a href="portland-destination.html" class="alink">波特兰旅游局</a>
                <a href="oregon-destination.html" class="alink">俄勒冈旅游局</a> -->
              </div>
            </li>
            <li class="item">
              <a href="about-us.html">关于我们</a>
              <!-- <div class="submenu text-center">
                <a href="javascript:void(0);" class="alink">微信</a>
                <a href="javascript:void(0);" class="alink">微博</a>
              </div> -->
            </li>
          </ul>
          <div class="pull-right" style="width: 8%;">
            <select class="language">
              <option>英文</option>
              <option selected>中文</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="box-width container">
      <img src="resource/images/search-banner.jpg" style="display: block; width: 100%;">
    </div>

    <div class="search-layout">
      <div class="container clearfix search-setion" style="padding: 0 15px;">
        <form class="search-form row">
          <div class="item row">
            <div class="col-xs-2">
              <div class="name">国家</div>
              <div class="input-layout">
                <input type="text" class="form-control" id="" name="countryId" placeholder="国家">
                <input type="hidden" class="form-control" id="" name="countryCode" placeholder="国家">
                <i class="glyphicon glyphicon-triangle-bottom"></i>
              </div>
            </div>
            <div class="col-xs-2">
              <div class="name">品牌</div>
              <div class="input-layout select-layout">
                <select class="js-example-basic-multiple brand-select form-control" name="supplierId">
                  <option value="AL">Alabama</option>
                  <option value="WY">Wyoming</option>
                </select>
              </div>
            </div>
            <div class="col-xs-2">
              <div class="name">取车地点</div>
              <div class="input-layout">
                <a href="" data-toggle="modal" data-target="#location-modal" class="location-item pickup-location"></a>
                <input type="hidden" class="form-control" id="" name="pickupLocation" placeholder="">
                <i class="glyphicon glyphicon-triangle-bottom"></i>
              </div>
            </div>
            <div class="col-xs-2">
              <div class="name">还车地点</div>
              <div class="input-layout">
                <a href="" data-toggle="modal" data-target="#location-modal" class="location-item return-location"></a>
                <input type="hidden" class="form-control" id="" name="returnLocation" placeholder="">
                <i class="glyphicon glyphicon-triangle-bottom"></i>
              </div>
            </div>
            <div class="col-xs-2">
              <div class="name">取车时间</div>
              <div class="input-layout">
                <input type="text" class="form-control pickup-date" id="" name="pickupDate" placeholder="">
                <i class="glyphicon glyphicon-triangle-bottom"></i>
              </div>
            </div>
            <div class="col-xs-2">
              <div class="name">还车时间</div>
              <div class="input-layout">
                <input type="text" class="form-control return-date" id="" name="returnDate" placeholder="">
                <i class="glyphicon glyphicon-triangle-bottom"></i>
              </div>
            </div>
          </div>
          <div class="item row">
            <div class="col-xs-2">
              <div class="name">年龄</div>
              <div class="input-layout select-layout">
                <select class="js-example-basic-multiple drive-age form-control" name="supplierId">
                  <option value="AL">30</option>
                  <option value="WY">32</option>
                </select>
              </div>
            </div>
            <div class="col-xs-2">
              <div class="name">预付/到付</div>
              <div class="input-layout select-layout">
                <select class="js-example-basic-multiple pay-type form-control" name="type">
                  <option value="">到付</option>
                  <option value="">预付</option>
                </select>
              </div>
            </div>
            <div class="col-xs-2">
              <div class="name">套餐</div>
              <div class="input-layout select-layout">
                <select class="js-example-basic-multiple package-type form-control" name="supplierId">
                  
                </select>
              </div>
            </div>
            <div class="col-xs-2">
              <button type="submit" class="btn search-btn">搜索</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="">
      <div class="search-tab box-width container text-center" style="width: 1200px;">
        <div class="item">
          <select class="js-example-basic-single js-states category-select form-control" name="category">
            <option value="">全部车型</option>
            <option value=""></option>
          </select>
        </div>
        <div class="item">
          <select class="js-example-basic-single js-states seat-select form-control" name="seat">
            <option value="">不限</option>
            <option value="">2-4位</option>
            <option value="">4-5位</option>
            <option value="">5-7位</option>
            <option value="">7位及7位以上</option>
          </select>
        </div>
        <div class="item">
          <select class="js-example-basic-single js-states price-select form-control" name="price">
            <option value="default">不限</option>
            <option value="bigToHigh">低到高</option>
            <option value="highTobig">高到低</option>
          </select>
        </div>
        <span class="iconfont icon-eye pull-right"></span>
      </div>
    </div>
    
    <div class="list-layout">
      <div class="box-width container">
        <div class="row" style="padding: 0;">
          <div class="col-xs-3 type-description" style="width: 29%;">
            <div class="type">
              <div class="type-title">畅游基本套餐</div>
              <div class="text">
                <p class="no-margin">碰撞盗抢险 起赔额：<span style="font-weight: normal; font-size: 13px;">0起赔，不含玻璃轮胎底盘</span></p>
                <p class="no-margin">百万第三者险：<span style="font-weight: normal; font-size: 13px;">最高100万美金的赔付</span></p>
                <p class="no-margin">含四名额外驾驶员</p>
              </div>
              <div class="text" style="margin-top: 10px;">门店位于机场内，免费巴士可达</div>
            </div>
            <div class="tips">
              <div class="text">
                <p class="no-margin">* 取、还车以当地时间为准</p>
                <p class="no-margin">* 所示价格只适合中国、香港、澳门地区的护照   和驾照持有者</p>
                <p class="no-margin">* 若预付订单客户提前还车，未使用天数不予   退款</p>
                <p class="no-margin">* 浮动价将不定时更新，常规价为常年适用价格</p>
                <p class="no-margin">* 服务热线：+86-21-63758388</p>
              </div>
            </div>
          </div>
          <div class="col-xs-9 car-list" style="width: 71%;">
            <div class="col-xs-12 list-item">
              <div class="img-cover">
                  <img src="resource/images/rent-card1.png">
              </div>
              <div class="description">
                <div class="title">MITSUBISHI MIRAGE OR SIMILAR</div>
                <div class="subtitle">中型/ 轿车/ 自动/ 3件行李/ 5座位/ 含空调/ 2或4门</div>
                <div class="price-box">
                  <a href="javascript:void(0);" class="price-item">
                    <div class="title">官方零售价：</div>
                    <div class="price">$4332.05</div>
                  </a>
                  <a href="javascript:void(0);" class="price-item">
                    <div class="title">返佣：</div>
                    <div class="price color-brown">$433.20</div>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-xs-12 list-item">
              <div class="img-cover">
                <img src="resource/images/rent-card1.png">
              </div>
              <div class="description">
                <div class="title">MITSUBISHI MIRAGE OR SIMILAR</div>
                <div class="subtitle">中型/ 轿车/ 自动/ 3件行李/ 5座位/ 含空调/ 2或4门</div>
                <div class="price-box">
                  <a href="javascript:void(0);" class="price-item">
                    <div class="title">官方零售价：</div>
                    <div class="price">$4332.05</div>
                  </a>
                  <a href="javascript:void(0);" class="price-item">
                    <div class="title">返佣：</div>
                    <div class="price b39265">$433.20</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer-layout">
      <div class="footer-box container box-width">
        <div class="row">
          <div class="item text-center ">
            <div class="title">国际租车</div>
            <a href="">爱路美国际租车</a>
            <a href="alamo.html">企业号租车</a>
            <a href="">纳什租车</a>
          </div>
          <div class="item text-center ">
            <div class="title">国际机票</div>
            <a href="american-airport.html">美国航空</a>
            <a href="british-airport.html">英国航空</a>
            <a href="feiji-airport.html">斐济航空</a>
            <a href="iberia-airport.html">西班牙伊比利亚航空</a>
            <a href="hawaiian-airport.html">夏威夷航空</a>
          </div>
          <div class="item text-center ">
            <div class="title">奢华邮轮</div>
            <a href="holland-america-line.html">荷美邮轮</a>
            <a href="seabourn-cruise-line.html">世邦邮轮</a>
            <a href="disney-cruise-line.html">迪士尼邮轮</a>
          </div>
          <div class="item text-center ">
            <div class="title">热门线路</div>
            <a href="">阳光加州</a>
            <a href="">开拓之旅-波特兰</a>
            <a href="">心花怒放-夏威夷</a>
            <a href="">邮轮热门航线</a>
          </div>
          <div class="item text-center ">
            <div class="title">目的地</div>
            <a href="dfw-destination.html">达拉斯沃斯堡国际机场</a>
            <a href="oregon-destination.html">俄勒冈旅游局</a>
            <a href="portland-destination.html">波特兰旅游局</a>
            <a href="">斐济</a>
          </div>
          <div class="item text-center ">
            <div class="title">联系我们</div>
            <a href=""><span class="iconfont icon-wechat"></span>微信</a>
            <a href=""><span class="iconfont icon-weibo"></span>微博</a>
            <a href=""><span class="iconfont icon-feizhu"></span>飞猪</a>
          </div>
          <div class="item text-center qrcode-box">
          
            <img src="resource/images/footer-wechat.png" alt="" style="width: 100px;">
            <p class="">微信</p>
            <img src="resource/images/footer-weibo.png" alt="" style="width: 100px;">
            <p class="">微博</p>
          </div>
        </div>
        <div class="copyright text-center">
          沪ICP备18038258号
        </div>
      </div>
    </div>

    <div class="modal fade" style="display: none;" id="location-modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">热门城市机场</h4>
          </div>
          <form action="" class="hot-cities-form">
            <div class="modal-body">
              <div class="form-group hot-cities-search">
                <div class="input-group">
                  <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                  <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
                </div>
              </div>
              
              <div class="hot-cities">热门城市</div>
              <div class="cities-list">
                <div class="city-box">
                  <div class="city-item-group">
                    <div href="javascript:;" class="item-block-title" data-letter="A">A</div>
                    <div class="item-box">
                      <div class="item">
                        奥克兰<span>Auckland</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="city-letter">
                  <div class="letter-box">
                    <div class="item">A
                      <span>A</span>
                    </div>
                    <div class="item">B
                      <span>B</span>
                    </div>
                    <div class="item">C
                      <span>C</span>
                    </div>
                    <div class="item">D
                      <span>D</span>
                    </div>
                    <div class="item">E
                      <span>E</span>
                    </div>
                    <div class="item">F
                      <span>F</span>
                    </div>
                    <div class="item">G
                      <span>G</span>
                    </div>
                    <div class="item">H
                      <span>H</span>
                    </div>
                    <div class="item">I
                      <span>I</span>
                    </div>
                    <div class="item">J
                      <span>J</span>
                    </div>
                    <div class="item">K
                      <span>K</span>
                    </div>
                    <div class="item">L
                      <span>L</span>
                    </div>
                    <div class="item">M
                      <span>M</span>
                    </div>
                    <div class="item">N
                      <span>N</span>
                    </div>
                    <div class="item">O
                      <span>O</span>
                    </div>
                    <div class="item">P
                      <span>P</span>
                    </div>
                    <div class="item">Q
                      <span>Q</span>
                    </div>
                    <div class="item">R
                      <span>R</span>
                    </div>
                    <div class="item">S
                      <span>S</span>
                    </div>
                    <div class="item">T
                      <span>T</span>
                    </div>
                    <div class="item">U
                      <span>U</span>
                    </div>
                    <div class="item">V
                      <span>V</span>
                    </div>
                    <div class="item">W
                      <span>W</span>
                    </div>
                    <div class="item">X
                      <span>X</span>
                    </div>
                    <div class="item">Y
                      <span>Y</span>
                    </div>
                    <div class="item">Z
                      <span>Z</span>
                    </div>
                    
                  </div>
                </div>
              </div>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary">确认</button>
            </div>
          </form>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

      
    <script src="resource/js/vendor/require.js"></script>
    <script>
      requirejs(['resource/js/main'], function() {
        require(['page/search'], function(page) {
          page.init()
        });
      });
    </script>
  </body>
</html>
